<template>
  <div class="dialog-container">
    <el-dialog
      v-dialogDrag
      title="字段信息"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="60%"
      append-to-body
      @open="onOpen"
      @opened="onOpened"
      @close="onClose"
      @closed="onClosed"
    >
      <div class="app-container" style="padding: 10px 0px 0px 0px;">
        <el-row>
          <el-col :span="16">
            <div class="search-container">
              <el-form ref="conditionForm" :model="searchForm" label-position="top">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="编码">
                      <el-input v-model="searchForm.code" size="mini" placeholder="编码" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="table-container">
              <el-row style="margin-bottom: 10px;">
                <el-button icon="el-icon-search" type="primary" size="mini" @click="onSearch">查询</el-button>
                <el-button icon="el-icon-close" type="danger" size="mini" @click="onClear">清空</el-button>
                <el-button icon="el-icon-plus" type="success" size="mini" @click="onAdd">新增</el-button>
              </el-row>
              <el-table
                v-loading="listLoading"
                :data="list"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
                :height="400"
                :stripe="true"
                @row-click="rowClick"
              >
                <el-table-column type="index" width="50" label="序号" align="center" />
                <el-table-column label="编码" prop="code" show-overflow-tooltip />
                <el-table-column label="名称" prop="name" width="100" />
                <el-table-column label="备注" prop="remark" width="100" />
                <el-table-column fixed="right" label="操作" width="130">
                  <template slot-scope="scope">
                    <el-button size="mini" @click.stop="edit(scope.row)">修改</el-button>
                    <el-button size="mini" @click.stop="deletes(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="pageVo.currentPage"
                :page-sizes="[30, 50, 100, 500]"
                :page-size="pageVo.pageSize"
                :total="pageVo.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="form-container">
              <el-form ref="editorForm" v-loading="formLoading" :model="editorForm" label-position="top">
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="编码">
                      <el-input v-model="editorForm.code" size="mini" placeholder="编码" clearable disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="类型" prop="type">
                      <el-select v-model="editorForm.type" filterable allow-create placeholder="类型" size="mini">
                        <el-option value="exclude" label="排除" />
                        <el-option value="include" label="包含" />
                        <el-option value="sensitive" label="铭感" />
                        <el-option value="encrypt" label="加密" />
                        <el-option value="intensify" label="增强" />
                        <el-option value="transform" label="转换" />
                        <el-option value="append" label="追加" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row v-if="editorForm.type == 'intensify' || editorForm.type == 'transform' || editorForm.type == 'append'" :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="名称">
                      <el-input v-model="editorForm.intensifyName" size="mini" placeholder="名称" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="加载类型">
                      <el-input v-model="editorForm.classType" size="mini" placeholder="加载类型" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="类路径">
                      <el-input v-model="editorForm.classPath" size="mini" placeholder="类路径" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col>
                    <el-button type="primary" size="mini" @click="onSubmit">保 存</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
      </div>
      <ResourceFieldEditor ref="ResourceFieldEditor" :row-data="fieldRowData" :type="fieldEditorType" />
    </el-dialog>
  </div>
</template>
<script>
import ResourceFieldEditor from './resourceFieldEditor.vue'
export default {
  components: {
    ResourceFieldEditor
  },
  props: {
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // ----------------------弹框部分-------------------------
      pageLoading: false,
      dialogFormVisible: false,
      searchForm: {
        code: ''
      },
      listLoading: false,
      formLoading: false,
      multipleSelection: [],
      calcTableHeight: '500px',
      pageVo: {
        total: 0,
        status: true,
        pageSize: 30,
        currentPage: 1
      },
      list: [],
      fieldRowData: {},
      fieldEditorType: '',
      editorForm: {
        id: null,
        code: '',
        type: '',
        intensifyName: '',
        classType: '',
        classPath: ''
      }
    }
  },
  created() {},
  mounted() {
  },
  methods: {
    onOpen() {
      this.pageLoading = true
    },
    onOpened() {
      this.getData()
      this.pageLoading = false
    },
    onClose() {},
    onClosed() {
      this.$parent.detailRowData = {}
      this.list = []
      this.searchForm.code = ''
    },
    // 查询按钮
    onSearch() {
      this.handleCurrentChange(1)
    },
    // 清空按钮
    onClear() {
      this.searchForm.code = ''
    },
    // 新增
    onAdd(data) {
      this.fieldRowData = this.rowData
      this.fieldEditorType = 'add'
      this.$refs.ResourceFieldEditor.dialogFormVisible = true
    },
    edit(row) {
      this.fieldRowData = row
      this.fieldEditorType = 'edit'
      this.$refs.ResourceFieldEditor.dialogFormVisible = true
    },
    // 删除
    deletes(row) {
      this.$confirm('删除, 是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var params = {
          id: row.id
        }
        this.$store.dispatch('system/resourceField/remove', params).then((data) => {
          this.$message({ message: '删除成功', type: 'success' })
          this.onSearch()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    rowClick(row, column, event) {
      this.formLoading = true
      var params = {
        resourceApplicationId: row.resourceApplicationId,
        resourceApiId: row.resourceApiId,
        resourceDetailId: row.resourceDetailId,
        resourceFieldId: row.id
      }
      this.$store.dispatch('system/resourceField/getType', params).then((data) => {
        this.editorForm.id = data.id
        // 显示编码
        this.editorForm.code = row.code
        this.editorForm.type = data.type
        this.editorForm.intensifyName = data.intensifyName
        this.editorForm.classType = data.classType
        this.editorForm.classPath = data.classPath
      }).finally(() => {
        this.formLoading = false
      })
    },
    onSubmit() {
      this.formLoading = true
      var params = {
        id: this.editorForm.id,
        type: this.editorForm.type,
        intensifyName: this.editorForm.intensifyName,
        classType: this.editorForm.classType,
        classPath: this.editorForm.classPath
      }
      this.$store.dispatch('system/resourceField/type', params).then((data) => {
        this.$message({ message: '操作成功', type: 'success' })
      }).finally(() => {
        this.formLoading = false
      })
    },
    // 获取数据
    getData() {
      this.listLoading = true
      const params = {
        ...this.searchForm,
        resourceApplicationId: this.rowData.resourceApplicationId,
        resourceApiId: this.rowData.resourceApiId,
        resourceDetailId: this.rowData.id,
        pageNum: this.pageVo.currentPage,
        pageSize: this.pageVo.pageSize
      }
      this.$store.dispatch('system/resourceField/page', params).then((data) => {
        var records = data.records
        this.list = records
        this.pageVo.total = data.total
        setTimeout(() => {
          this.listLoading = false
        }, 10)
      })
    },
    dateFormat(date) {
      if (date === undefined) {
        return ''
      }
      return this.$Utils.formatDate(new Date(date))
    },
    // 页码改变事件
    handleCurrentChange(val) {
      this.pageVo.currentPage = val
      this.getData()
    },
    // 页数改变事件
    handleSizeChange(val) {
      this.pageVo.pageSize = val
      this.pageVo.currentPage = 1
      this.getData()
    },
    // 多选框触发事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
